﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Virtual Keyboard Mobile Demo</title>

    <script src="jquery.js"></script>

    <link href="../css/keyboard.css" rel="stylesheet">
    <script src="../js/jquery.keyboard.js"></script>
    <script src="../js/jquery.mousewheel.js"></script>
    <script src="../js/jquery.keyboard.extension-mobile.js"></script>
</head>
<body>
    <input id="fff" type="text" />
    <script type="text/javascript">

        $('#fff')
            .keyboard({
                keyBinding: 'mousedown touchstart',
                alwaysOpen: true
            })
            .addMobile({
                // keyboard wrapper theme
                container: { theme: 'b', cssClass: 'ui-body' },
                // keyboard duplicate input
                input: { theme: 'b', cssClass: '' },
                // theme added to all regular buttons
                buttonMarkup: { theme: 'b', cssClass: 'ui-btn', shadow: 'true', corners: 'true' },
                // theme added to all buttons when they are being hovered
                buttonHover: { theme: 'b', cssClass: 'ui-btn-hover' },
                // theme added to action buttons (e.g. tab, shift, accept, cancel);
                // parameters here will override the settings in the buttonMarkup
                buttonAction: { theme: 'b', cssClass: 'ui-btn-active' },
                // theme added to button when it is active (e.g. shift is down)
                // All extra parameters will be ignored
                buttonActive: { theme: 'b', cssClass: 'ui-btn-active' },
                // if more than 3 mobile themes are used, add them here
                allThemes: 'a b c'
            });
    </script>
</body>
</html>